<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>引出生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>

  <body>
    <!-- 
				生命周期：
						1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
						2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
						3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
						4.生命周期函数中的this指向是vm 或 组件实例对象。
		-->

    <div id="root">
      <!-- 动态绑定样式（透明度），如果同名可简写  注意是一个括号 -->
      <h2 :style="{opacity}">欢迎学习Vue</h2>
      <!-- 严重问题！会导致触发定时任务修改页面，重新渲染再次触发，无限循环 -->
      <!-- {{ change() }} -->
    </div>
  </body>

  <script type="text/javascript">
    //下面需要使用，所以还需要声明VM    实际开发中尽量不创建VM实例
    new Vue({
      el: "#root",
      data: {
        opacity: 1,
      },

      //2：在methods中无法实现，1通过外部调用  2页面自动触发
      // methods: {
      //   change() {
      //     setInterval(() => {
      //       this.opacity -= 0.01;
      //       if (this.opacity <= 0) this.opacity = 1;
      //     }, 16);
      //   },
      // },

      //mounted可看作一个普通函数，只是Vue在特殊时机调用！
      //一般会称其为生命周期钩子
      //在其前后还有其他的函数处理，统称为【Vue的生命周期】，类似Java中Bean的声明周期

      //3：挂载完毕后触发：Vue完成模板的解析并把初始的真实Dom元素放入页面后调用
      mounted() {
        console.log("页面挂载完毕，执行mounted");
        setInterval(() => {
          this.opacity -= 0.01;
          if (this.opacity <= 0) this.opacity = 1;
        }, 16);
      },
    });

    //1：定时器原始方式实现功能（不推荐），但是不符合Vue的设计逻辑，将所有属性和方法打包
    // setInterval(() => {
    //   //透明度逐渐减少 0-1
    //   vm.opacity -= 0.01;
    //   //js不擅长玩小数，应使用更详细的大于小于控制
    //   if (vm.opacity <= 0) vm.opacity = 1;
    // }, 16);
  </script>
</html>
